<template>
  <div class="container">
    <div class="header">
      <el-avatar :size="80" :src="userAvatar" class="avatar" />
      <div class="user-info">
        <h2>{{ userInfo.name }}</h2>
        <p>{{ userInfo.email }}</p>
        <el-tag :type="userInfo.isVerified ? 'success' : 'danger'" size="small" class="verification-badge">
          {{ userInfo.isVerified ? '已认证' : '未认证' }}
        </el-tag>
      </div>
    </div>
    
    <el-card class="settings-card">
      <template #header>
        <div class="settings-header">账号设置</div>
      </template>
      <div class="settings-item" @click="navigateTo('profile')">
        <div class="item-content">
          <div class="item-title">个人信息</div>
          <div class="item-desc">修改昵称、个人简介等信息</div>
        </div>
        <div class="item-action">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
      <div class="settings-item" @click="navigateTo('password')">
        <div class="item-content">
          <div class="item-title">修改密码</div>
          <div class="item-desc">定期更改密码有助于账号安全</div>
        </div>
        <div class="item-action">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
      <div class="settings-item" @click="navigateTo('verification')">
        <div class="item-content">
          <div class="item-title">学生认证</div>
          <div class="item-desc">绑定学号，解锁更多功能</div>
        </div>
        <div class="item-action">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
    </el-card>
    
    <el-card class="settings-card">
      <template #header>
        <div class="settings-header">隐私与安全</div>
      </template>
      <div class="settings-item" @click="navigateTo('privacy')">
        <div class="item-content">
          <div class="item-title">隐私设置</div>
          <div class="item-desc">管理谁可以查看您的信息和联系您</div>
        </div>
        <div class="item-action">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
      <div class="settings-item" @click="navigateTo('notifications')">
        <div class="item-content">
          <div class="item-title">通知设置</div>
          <div class="item-desc">管理您接收的通知类型</div>
        </div>
        <div class="item-action">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
      <div class="settings-item" @click="navigateTo('devices')">
        <div class="item-content">
          <div class="item-title">登录设备管理</div>
          <div class="item-desc">查看和管理已登录的设备</div>
        </div>
        <div class="item-action">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
    </el-card>
    
    <el-card class="settings-card">
      <template #header>
        <div class="settings-header">内容管理</div>
      </template>
      <div class="settings-item" @click="navigateTo('posts')">
        <div class="item-content">
          <div class="item-title">我的发布</div>
          <div class="item-desc">查看和管理您发布的信息</div>
        </div>
        <div class="item-action">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
      <div class="settings-item" @click="navigateTo('favorites')">
        <div class="item-content">
          <div class="item-title">点赞收藏</div>
          <div class="item-desc">查看您点赞和收藏的内容</div>
        </div>
        <div class="item-action">
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
    </el-card>
    
    <el-button class="logout-btn" type="danger" @click="handleLogout">退出登录</el-button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ArrowRight } from '@element-plus/icons-vue'

// 模拟用户数据
const userInfo = ref({
  name: '测试用户',
  email: 'test@example.com',
  isVerified: false
})

const userAvatar = ref('https://via.placeholder.com/80')

const router = useRouter()

const navigateTo = (path) => {
  ElMessage.info(`即将跳转到: ${path}`)
  // 实际应用中这里应该是页面跳转或模态框打开
}

const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('已退出登录')
    // 实际应用中这里应该是调用退出登录API并跳转到登录页
  }).catch(() => {
    // 用户取消操作
  })
}
</script>

<style scoped>
:root {
  --primary-color: #3498db;
  --secondary-color: #2980b9;
  --background-color: #f9f9f9;
  --card-color: #ffffff;
  --text-color: #333333;
  --border-color: #e0e0e0;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}

.avatar {
  margin-right: 20px;
  border: 3px solid var(--primary-color);
}

.user-info h2 {
  margin-bottom: 5px;
  color: var(--text-color);
}

.verification-badge {
  margin-top: 5px;
}

.settings-card {
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  overflow: hidden;
}

.settings-header {
  padding: 15px 20px;
  background-color: #f8f9fa;
  border-bottom: 1px solid var(--border-color);
  font-weight: bold;
}

.settings-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background-color 0.2s;
}

.settings-item:last-child {
  border-bottom: none;
}

.settings-item:hover {
  background-color: #f5f5f5;
}

.item-content {
  flex: 1;
}

.item-title {
  font-weight: 500;
}

.item-desc {
  font-size: 13px;
  color: #777;
  margin-top: 3px;
}

.item-action {
  color: #999;
}

.logout-btn {
  display: block;
  width: 100%;
  padding: 15px;
  text-align: center;
  font-size: 16px;
  margin-top: 30px;
  transition: background-color 0.2s;
}
</style>